<template>
  <view class="address-bigbox">
    <uni-swipe-action>
      <block v-for="(item, i) in address" :key="i">
        <uni-swipe-action-item :right-options="options" @click="swipeActionClickHandler(i)">
          <view class="address-box" @click="selectAddress(item, i)">
            <view class="address-icon">
              <uni-icons type="checkmarkempty" size="24" color="#fba007" v-if="active === i"></uni-icons>
            </view>
            <view class="content">
              <!-- 收件人姓名 -->
              <view class="content-userName">{{item.userName + (item.sexType === 1 ? '先生' : '女士')}}</view>
              <!-- 收件地址 -->
              <view class="content-addstr">{{item.address + item.title + item.detailAddress}}
              </view>
            </view>
          </view>
        </uni-swipe-action-item>
      </block>
    </uni-swipe-action>

    <!-- 新增收获地址 -->
    <view class="address-choose-box" @click="chooseAddress">
      <uni-icons type="plusempty" size="20" color="gray"></uni-icons>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'
  export default {
    computed: {
      ...mapState('m_user', ['userinfo', 'defaultAddress']),
      ...mapGetters('m_user', ['addstr']),
    },
    data() {
      return {
        // 勾选图标暂时隐藏标志
        active: 0,
        address: [],
        // 勾选的收获地址
        checkAddress: {},
        options: [{
          text: '删除',
          style: {
            backgroundColor: 'orangered'
          },
        }]
      };
    },
    onShow() {
      const defaultAddress = this.defaultAddress
      if(typeof this.userinfo.userAddress !== 'object') {
        this.address = JSON.parse(this.userinfo.userAddress || "[]")
      } else {
        this.address = this.userinfo.userAddress
      }
      // 查找已选收获地址在收获地址数组里面的索引
      const index = this.address.findIndex(item => JSON.stringify(item) === JSON.stringify(defaultAddress));
      this.active = index
    },
    methods: {
      ...mapMutations('m_user', ['updateAddress', 'updateDefaultAddress']),
      // 选择收货地址
      selectAddress(item, i) {
        this.active = i
        this.updateDefaultAddress(this.active)
      },
      // 新增收货地址
      chooseAddress() {
        uni.navigateTo({
          url: '/subpkg/stop_add_address/stop_add_address'
        })
      },
      // 点击了滑动删除操作按钮
      async swipeActionClickHandler(index) {
        // 准备参数
        var token = uni.getStorageSync('token')
        const addressIndex = index
        const query = {
          token,
          addressIndex,
        }
        const {
          data: res
        } = await uni.$http.post('/api/delete/address', query)
        if (res.meta.status !== 200) return uni.$showMsg('删除收货地址失败')
        this.updateAddress(res.message)
        if(typeof this.userinfo.userAddress !== 'object') {
          this.address = JSON.parse(this.userinfo.userAddress || "[]")
        } else {
          this.address = this.userinfo.userAddress
        }
      }
    }
  }
</script>

<style lang="scss">
  .address-bigbox {
    height: 100%;

    .address-box {
      align-self: center;
      // width: 100%;
      display: flex;
      padding: 30rpx 0;
      background-color: white;
      border-bottom: 1px solid #eee;

      .address-icon {
        display: flex;
        width: 46rpx;
        justify-content: center;
        align-items: center;
        // border: 1px solid red;
        margin: 0 28rpx;
      }

      .content {
        // display: flex;
        flex-wrap: wrap;
        // border: 1px solid red;

        .content-userName {
          font-size: 28rpx;
          margin-bottom: 2rpx;
        }

        .content-addstr {
          font-size: 24rpx;
          color: gray;
        }
      }
    }

    // 选择收货地址的盒子
    .address-choose-box {
      height: 50px;
      width: 50px;
      position: fixed;
      bottom: 15px;
      left: 50%;
      transform: translateX(-25px);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background-color: white;
      border: 1px solid #eee;
    }
  }
</style>